<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">

          <div class="main-dianli-bottomgg" id="style-1">

            <div class="main-wendu-kuaiw" style="padding-top: 15px;">

            <div class="dianli-peidian02">
              <div class="mainbg-tit diyige">
            <div class="biaoti"><span  v-if="pId == 1">报警</span><span   v-else>预警</span>记录</div>
          </div>

              <div class="main-con bujv-con">
                <div class="con-dianvv">
					<table>
					<tr>
					<th width= "16% " class="lansezi">部门</th>
					<th width= "14% "  class="lansezi">设备名称</th>
					<th width= "15% "  class="lansezi">传感器名称</th>
					<th width= "10% " class="lansezi">当前值</th>
					<th width= "10% " class="lansezi">类型</th>
					<th width= "19% " class="lansezi">报警时间</th>
					<th width= "16% " class="lansezi">操作</th>
					</tr>
					<tr  v-for="(item,index) in equipList" :key="index" >
					<td >{{item.dept}}</td>
					<td >{{item.cabinet}}</td>
					<td >{{item.point}}</td>
					<td><span class="colred">{{item.value}}</span></td>
					<!-- <td><span class="colred" v-if="pId == 1">报警</span><span  class="chengsezi" v-else>预警</span> </td> -->
					<td >{{item.type}}</td>
          <td >{{item.time}}</td>
					<td>
            <div >
              <span v-if="item.is_handel == true" class="anniu1 shou">已处理</span>
							<span class=" shou anniu" v-else  @click="is_handelfun(item.id)">未处理</span>
            </div>
          </td>
					</tr>
					</table>
				</div>
               <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
                </div>
              </div>

            </div>


           </div>


				<!-- 一组结束 -->

				<!-- 右边模块一 -->

        <div class="main-wendu-kuaiw2" style="padding-top: 10px;min-height:400px;">
              <div class=" dianli-peidian02">
                 <div class="mainbg-tit diyige">
            <div class="biaoti"><span  v-if="pId == 1">报警</span><span  v-else>预警</span>历史数据</div>
            </div>
            <div class="bujv02" >
        <div class="gx-wen">设备名称：</div>
        <el-select v-model="shebei" placeholder="请选择设备名称" class="maclass" @change="shebeifun">
          <el-option
            v-for="item in shebeilist"
            :key="item.cabinetId"
            :label="item.name"
            :value="item.cabinetId">
          </el-option>
        </el-select>
        <div class="gx-wen">传感器名称：</div>
        <el-select v-model="dianwei" placeholder="选择传感器名称" class="maclass"  @change="dianweifun">
          <el-option
            v-for="item in dianweilist"
            :key="item.pointCode"
            :label="item.name"
            :value="item.pointCode">
          </el-option>
        </el-select>
        <div class="gx-wen">开始时间：</div>
        <el-date-picker
          v-model="begintime"
          type="date"
          class="maclass1"
          @change="begintimefun"
          value-format="yyyy-MM-dd"
           :picker-options="pickerOptions"
          placeholder="选择日期">
      </el-date-picker>
        <div class="gx-wen">结束时间：</div>
       <el-date-picker
        v-model="endtime"
        type="date"
        class="maclass1"
         @change="endtimefun"
         value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        placeholder="选择日期">
    </el-date-picker>
    <div class="gx-button shou" @click="warnlinefun">查询</div>
    <div class="gx-button shou" @click="daochufun">导出</div>
      </div>
             <div class="bujv-inh">
                  <div id="quxian3" style="width:100%;height:100%"> </div>
              </div>
          </div>
          </div>


			</div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
  components: { Top },
  data(){
    return{
      baojing:0,//不想
      pId:1,
      currentIndex:0,
       shebei:'',
      shebeilist:[],
      dianwei:'',
      dianweilist:[],
       begintime:'',
      endtime:'',
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      total:0,
      pageSize:5,
      current:1,
      departList:[{name:'报警',deptId:1},{name:'预警',deptId:0}],
      warnEquipList:[{equip_nick_name:"设备",level: 'warning'}],
      equipList:[],
    }
  },
   beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted(){
    this.cabinetsfun()
    this.warntablefun()
   this.warningfun()
    this.tm2 = setInterval(() => {
      this.warningfun()
      this.warntablefun()
    }, 30000);
  },
  methods:{
    is_handelfun(val){
       this.loginLoading = true;
      this.$apiv.is_handel({warnId:val}).then((res) => {
        console.log(res.data)
        this.warningfun()
        this.warntablefun()
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    warningfun(){
       this.loginLoading = true;
      this.$apiv.warning({}).then((res) => {
        console.log("ggg",res.data)
         if(res.data.is_ok== true){
          this.baojing = 1
        }else{
          this.baojing = 0
        }
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    warntablefun(){
       this.loginLoading = true;
      this.$apiv.warntable({page:this.current,limit:this.pageSize,warnType:this.pId}).then((res) => {
        console.log(res.data)
          this.equipList = res.data.point_data
					this.total = res.data.total
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
     handleCurrentChange(val){
       console.log(`当前页: ${val}`)
      this.current = val
      this.warntablefun()
    },
    cabinetsfun(){
      this.loginLoading = true;
      this.$apiv.cabinets({}).then((res) => {
          this.shebeilist = res.data
          this.shebei = res.data[0].cabinetId
          this.loginLoading = false;
          this.pointsfun()
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    pointsfun(){
      this.loginLoading = true;
      this.$apiv.points({cabinetId:this.shebei}).then((res) => {
          this.dianweilist = res.data
          if(this.dianweilist.length >0){
            this.dianwei = res.data[0].pointCode
          }else{
            this.dianwei = ''
          }
          this.warnlinefun()
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    warnlinefun(){
      console.log("线")
       this.loginLoading = true;
       this.$apiv.warnline({warnType:this.pId,pointCode:this.dianwei,startTime:this.begintime,endTime:this.endtime}).then((res) => {
        console.log(res.data)
          this.$nextTick(()=>{
            this.quxianEchart3(res.data.value_list,res.data.time_list)
          })
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    shebeifun(e){
      console.log(e)
      this.shebei = e
      this.pointsfun()
    },
    dianweifun(e){
      console.log(e)
      this.dianwei = e
      this.warnlinefun()
    },
     begintimefun(e){
      this.begintime= e
    },
    endtimefun(e){
      let kaishi =  new Date(this.begintime).getTime()
      let jieshu =  new Date(e).getTime()
      console.log('开始',kaishi)
      console.log('结束',jieshu)
      if(kaishi > jieshu){
        this.$alert('结束时间不能小于开始时间，请重新选择结束时间', '', {
          confirmButtonText: '确定',
        });
        this.endtime = ''
      }else{
        this.endtime = e
      }
    },
    goDepartEquip(index,id){
      this.currentIndex = index
      this.pId = id
      console.log(this.pId)
      this.warntablefun()
      this.warnlinefun()
    },
    daochufun(){

       console.log("进入函数")
       const loading = this.$loading({
        lock:true,
        text:'正在导出，请稍后...',
        spinner:'el-icon-loading',
        background:'rgba(0,0,0,0.7)'
       })
        this.$apiv.daochuzheli({warnType:this.pId,pointCode:this.dianwei,startTime:this.begintime,endTime:this.endtime})
          .then(res => {
            loading.close()
            console.log("5555555555555555",res)
            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
            if("download" in document.createElement("a")){
               const link = document.createElement('a')  //创建a标签
               link.style.display = 'none'
                link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
                link.download = '报警统计报表.xlsx'
                document.body.appendChild(link)
                // 模拟点击事件
                link.click()  //设置点击事件
                URL.revokeObjectURL(link.href)
                document.body.removeChild(link)
            }else{
              navigator.msSaveBlob(blob,'报警统计报表')
            }
        	})
        	.catch(res => {
             loading.close()
            console.log(res)
        	});
    },

    quxianEchart3(shujv, time) {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("quxian3"));
      let option = {
        // legend: {
        //   itemWidth: 16,
        //   itemHeight: 8,
        //   itemGap: 16,
        //   textStyle: {
        //     color: "#A3E2F4",
        //     fontSize: 12,
        //     fontWeight: 0,
        //   },
        //   data: ["报警"],
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "20px",
          left: "50px",
          right: "20px",
          bottom: "20px",
          // containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3", // 坐标值的具体的颜色
              },
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: time,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#1caef6",
              },
            },

            splitLine: {
              //网格线
              lineStyle: {
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "rgba(255, 255, 255, 0.1)",
              },
              show: true, //隐藏或显示
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3", // 坐标值的具体的颜色
              },
            },
          },
        ],
        series: [
          {
            name: "温度报警",
            type: "line",
            smooth: true, //是否平滑
            // showAllSymbol: true,
            // symbol: "circle",
            // symbolSize: 10,
            // lineStyle: {
            //   normal: {
            //     color: "#6c50f3",
            //     shadowColor: "rgba(0, 0, 0, .3)",
            //     shadowBlur: 0,
            //     shadowOffsetY: 5,
            //     shadowOffsetX: 5,
            //   },
            // },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#6c50f3",
            //   },
            // },
            // itemStyle: {
            //   color: "#6c50f3",
            //   borderColor: "#fff",
            //   borderWidth: 2,
            //   shadowColor: "rgba(0, 0, 0, .3)",
            //   shadowBlur: 0,
            //   shadowOffsetY: 2,
            //   shadowOffsetX: 2,
            // },

            data: shujv,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  }
};
</script>

<style scoped  lang="scss">
@import url("../../../static/zhuti.css");
.maclass{
   margin-left: 3px;
   width: 130px;
 /deep/.el-input--suffix .el-input__inner{
  padding-right: 100px;
 }
  /deep/ .el-input__inner{
  background: transparent;
  color: #fff;
  height:38px;
   border: 1px solid #35bccf;
 }
}
.maclass1{
   margin-left: 3px;
   width: 130px;
 /deep/.el-input--suffix .el-input__inner{
  padding-right: 10px;
 }
  /deep/ .el-input__inner{
  background: transparent;
  color: #fff;
  height: 38px;
   border: 1px solid #35bccf;
 }
}
</style>